<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->
<ng-container *transloco="let t">
  <div
    class="modal-wrapper"
    role="dialog"
    aria-modal="true"
    aria-labelledby="members-modal-title">
    <h1
      id="members-modal-title"
      class="title">
      {{ t('project_overview.members.title') }}
      <span class="count">({{ totalMembers }})</span>
      <span
        class="pending"
        *ngIf="totalPending">
        <tui-svg src="clock"></tui-svg>
        {{
          t('project_overview.members.count_pending', { number: totalPending })
        }}</span
      >
    </h1>

    <tg-project-members-list
      *ngIf="members.length"
      [user]="user"
      [leaveProject]="false"
      [paginate]="true"
      [members]="members"></tg-project-members-list>

    <div class="modal-bottom">
      <button
        (click)="closeModal.emit()"
        class="close"
        tuiButton
        type="button">
        {{ t('commons.close') }}
      </button>
    </div>
  </div>
</ng-container>
